<!--
 * @Author: zzy zhangzeyang@huidr.com
 * @Date: 2023-12-29 11:14:20
 * @LastEditors: zzy zhangzeyang@huidr.com
 * @LastEditTime: 2025-03-03 17:50:43
 * @FilePath: \about_vue\src\views\HomeView.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--
 * @Author: zhangzeyang zhangzeyang@huidr.com
 * @Date: 2023-12-29 11:14:20
 * @LastEditors: zzy zhangzeyang@huidr.com
 * @LastEditTime: 2025-02-24 16:54:45
 * @FilePath: \about_vue\src\views\HomeView.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup>
import { ref, watch } from 'vue';
import { useRoute } from 'vue-router';

const active = ref(0);
const route = useRoute();

// 监听路由变化，更新 tabbar 激活状态
watch(() => route.path, (newPath) => {
    switch(newPath) {
        case '/home1':
            active.value = 0;
            break;
        case '/home2':
            active.value = 1;
            break;
        case '/home3':
            active.value = 2;
            break;
    }
});
</script>

<template>
    <div class="homeContainer">
        
        <router-view></router-view>

        <van-tabbar v-model="active" >
            <van-tabbar-item icon="home-o" to="/home1">首页</van-tabbar-item>
            <van-tabbar-item icon="search" to="/home2">查询</van-tabbar-item>
            <van-tabbar-item icon="setting" to="/home3">设置</van-tabbar-item>
        </van-tabbar>

    </div>
</template>

<style lang="scss">
.homeContainer {
    width: 100vw;
    height: 100vh;
    background: #d9d9db;
}
</style>
